<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title></title>
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
		<link rel="stylesheet" href="./css/index.css">
		<style>
			/* 专家介绍页面专用样式 */
			.expert-search-container {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 20px;
				padding: 15px;
				background: #f5f5f5;
				border-radius: 5px;
			}

			.search-box {
				display: flex;
				align-items: center;
				flex-grow: 1;
				margin-right: 20px;
			}

			.search-box input {
				padding: 8px 15px;
				border: 1px solid #ddd;
				border-radius: 4px;
				font-size: 14px;
				width: 100%;
				max-width: 400px;
			}

			.search-box button {
				padding: 8px 15px;
				margin-left: 10px;
				background-color: #0066cc;
				color: white;
				border: none;
				border-radius: 4px;
				cursor: pointer;
				transition: background-color 0.3s;
			}

			.search-box button:hover {
				background-color: #0052a3;
			}

			.filter-options {
				display: flex;
				align-items: center;
			}

			.filter-options select {
				padding: 8px;
				border: 1px solid #ddd;
				border-radius: 4px;
				margin-left: 10px;
				font-size: 14px;
			}

			.expert-list {
				display: grid;
				grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
				gap: 20px;
				margin-bottom: 30px;
			}

			.expert-card {
				display: flex;
				background: white;
				border-radius: 8px;
				box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
				overflow: hidden;
				transition: transform 0.3s, box-shadow 0.3s;
				height: 180px;
			}

			.expert-image-container {
				width: 120px;
				min-width: 120px;
				/* 确保图片容器宽度固定 */
				height: 150px;
				overflow: hidden;
			}

			.expert-image {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}

			.expert-info {
				text-align: left;
				/* 多行省略关键代码 */
				display: -webkit-box;
				-webkit-line-clamp: 3;
				/* 限制显示3行 */
				-webkit-box-orient: vertical;
				/* 垂直方向排列 */
				overflow: hidden;
				/* 隐藏溢出内容 */
				text-overflow: ellipsis;
				/* 显示省略号 */
				word-break: break-word;
				/* 允许单词断行 */
			}

			/* 确保文字内容自动换行 */
			.expert-name,
			.expert-title,
			.expert-department,
			.expert-specialty {
				word-break: break-word;
				/* 中文换行 */
				white-space: normal;
				/* 确保不强制单行显示 */
				overflow: hidden;
				/* 隐藏溢出内容 */
				text-overflow: ellipsis;
				/* 文字溢出显示省略号 */
				display: -webkit-box;
				-webkit-line-clamp: 2;
				/* 限制最多显示2行 */
				-webkit-box-orient: vertical;
			}

			/* 特别处理专长描述，允许更多行 */
			.expert-specialty {
				-webkit-line-clamp: 3;
				/* 专长描述最多显示3行 */
				margin-bottom: 10px;
			}


			.pagination {
				display: flex;
				justify-content: center;
				margin-top: 30px;
			}

			.pagination a {
				padding: 8px 15px;
				margin: 0 5px;
				border: 1px solid #ddd;
				border-radius: 4px;
				color: #333;
				text-decoration: none;
				transition: all 0.3s;
			}

			.pagination a.active,
			.pagination a:hover {
				background-color: #0066cc;
				color: white;
				border-color: #0066cc;
			}

			.loading {
				text-align: center;
				padding: 50px;
				font-size: 18px;
				color: #666;
			}

			.no-results {
				text-align: center;
				padding: 50px;
				font-size: 18px;
				color: #666;
				grid-column: 1 / -1;
			}

			.expert-introduction {
				word-wrap: break-word;
				/* 允许长单词或URL换行 */
				white-space: normal;
				/* 确保空格和换行符正常处理 */
			}
		</style>
	</head>
	<body>
		<!-- 头部区域 -->
		<header class="hospital-header">
			<div class="hospital-container">
				<div class="hospital-topbar">
					<div class="hospital-logo" style="margin:18px 105px 0px 8px">
						<img src="./static/imgs/logo.jpg" width="260px" alt="医院标志">
					</div>
					<div class="header-rg">
						<span style="font-size: 14px;">
							<a href="appointments.html" target="_blank"
								style="text-decoration: none; color: dimgray;">预约挂号</a>
							|
							<a href="zhuanjiaList.html" target="_blank"
								style="text-decoration: none; color: dimgray;">专家介绍</a>
							|
							<a href="lyjt.html" target="_blank" style="text-decoration: none; color: dimgray;">来院交通</a>
							|
							<a href="contact.html" target="_blank"
								style="text-decoration: none; color: dimgray;">联系我们</a>
						</span>
						<div class="hospital-search">
							<input type="text" placeholder="搜索..." style="width: 210px;">
							<input type="image" placeholder="搜索..." src="static/imgs/ss.gif">
						</div>
					</div>
				</div>
				<nav class="hospital-nav">
					<ul class="nav-menu">
						<li><a href="index.html">首页</a></li>
						<li><a href="#">专家介绍</a></li>
						<li><a href="chat.html">智能预约</a></li>
						<li><a href="medical-info.html">医疗知识库</a></li>
						<li><a href="appointments.html">我的预约</a></li>
						<li><a href="profile.html">个人中心</a></li>
						<li><a href="lyjt.html">来院交通</a></li>
						<li><a href="contact.html">联系我们</a></li>
					</ul>
				</nav>
			</div>
		</header>

		<!-- 主要内容区 -->
		<main class="hospital-main" style="padding-top: 8px;">
			<div class="hospital-container">
				<div class="content-row">
					<div class="main-content">
						<div class="content-card" style="padding: 5px;">
							<img src="static/imgs/zhuanjiajieshao-banner.jpg" alt="专家介绍"
								style="width: 100%;height: 100%;" />
						</div>
						<div class="content-card">
							<div class="card-title">
								<span>专家介绍</span>
							</div>
							<div class="card-body">
								<!-- 搜索和筛选区域 -->
								<div class="expert-search-container">
									<div class="search-box">
										<input type="text" id="search-input" placeholder="输入专家姓名或科室...">
										<button id="search-button"><i class="fas fa-search"></i> 搜索</button>
									</div>
									<div class="filter-options">
										<label for="title-filter">职称:</label>
										<select id="title-filter">
											<option value="">全部职称</option>
											<option value="主任医师">主任医师</option>
											<option value="副主任医师">副主任医师</option>
											<option value="主治医师">主治医师</option>
										</select>
									</div>
								</div>

								<!-- 专家列表容器 -->
								<div id="expert-list-container">
									<div class="loading">加载中，请稍候...</div>
								</div>

								<!-- 分页控件 -->
								<div class="pagination" id="pagination">
									<!-- 分页按钮将通过JavaScript动态生成 -->
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</main>

		<!-- 页脚区域 -->
		<footer class="hospital-footer">
			<div class=""></div>
			<div>
				<p>Copyright©青岛市市立医院（集团）</p>
				<p>鲁ICP备09051934号</p>
				<p>医院邮箱：qdsslyybgs@qd.shandong.cn</p>
				<p>技术支持：22计算机3姚志诚</p>
			</div>
		</footer>
		<script src="./js/index.js"></script>
		<script>
			document.addEventListener('DOMContentLoaded', function() {
				// 当前页码
				let currentPage = 1;
				// 每页显示的专家数量
				const itemsPerPage = 9;
				// 存储所有专家数据
				let allExperts = [];
				// 存储过滤后的专家数据
				let filteredExperts = [];
				// 搜索输入框
				const searchInput = document.getElementById('search-input');
				// 职称筛选框
				const titleFilter = document.getElementById('title-filter');
				// 搜索按钮
				const searchButton = document.getElementById('search-button');
				// 专家列表容器
				const expertListContainer = document.getElementById('expert-list-container');
				// 分页容器
				const paginationContainer = document.getElementById('pagination');

				function fetchExperts(page = 1, pageSize = itemsPerPage, searchTerm = '', title = '') {
					const params = new URLSearchParams({
						page: page,
						size: pageSize,
						name: searchTerm,
						title: title
					});

					fetch(`http://localhost:8080/api/doctorList?${params}`)
						.then(response => response.json())
						.then(data => {
							// 确保变量声明
							const totalExperts = data.total;
							const totalPages = data.pages;
							currentPage = data.current;

							// 直接使用后端返回的分页数据
							filteredExperts = data.data;

							renderExperts();
							renderPagination(totalPages); // 使用后端计算的总页数
						})
						.catch(error => {
							console.error('获取专家数据失败:', error);
							expertListContainer.innerHTML = '<div class="no-results">无法加载专家数据，请稍后再试。</div>';
						});
				}

				// 渲染专家列表
				function renderExperts() {
					// 直接使用后端返回的分页数据，不需要再次分页
					if (filteredExperts.length === 0) {
						expertListContainer.innerHTML = '<div class="no-results">没有找到符合条件的专家</div>';
						return;
					}

					let html = '<div class="expert-list">';

					// 直接渲染 filteredExperts（已经是当前页的数据）
					filteredExperts.forEach(expert => {
						html += `
				            <div class="expert-card">
				                <div class="expert-image-container">
				                    <img src="${expert.image}" alt="${expert.name}" class="expert-image">
				                </div>
				                <div class="expert-info">
				                    <div class="expert-name">${expert.name}</div>
				                    <div class="expert-title">${expert.title}</div>
				                    <div class="expert-department">${expert.department}</div>
				                    <div class="expert-introduction">${expert.introduction}</div>
				                </div>
				            </div>
				        `;
					});

					html += '</div>';
					expertListContainer.innerHTML = html;
				}

				// 渲染分页控件
				function renderPagination(totalPages) {
					if (totalPages <= 1) {
						paginationContainer.innerHTML = '';
						return;
					}

					let html = '';

					// 上一页按钮
					if (currentPage > 1) {
						html += `<a href="#" class="page-link" data-page="${currentPage - 1}">上一页</a>`;
					}

					// 页码按钮
					const maxVisiblePages = 5;
					let startPage = Math.max(1, currentPage - Math.floor(maxVisiblePages / 2));
					let endPage = Math.min(totalPages, startPage + maxVisiblePages - 1);

					if (endPage - startPage + 1 < maxVisiblePages) {
						startPage = Math.max(1, endPage - maxVisiblePages + 1);
					}

					for (let i = startPage; i <= endPage; i++) {
						if (i === currentPage) {
							html += `<a href="#" class="page-link active" data-page="${i}">${i}</a>`;
						} else {
							html += `<a href="#" class="page-link" data-page="${i}">${i}</a>`;
						}
					}

					// 下一页按钮
					if (currentPage < totalPages) {
						html += `<a href="#" class="page-link" data-page="${currentPage + 1}">下一页</a>`;
					}

					paginationContainer.innerHTML = html;

					// 添加分页按钮事件
					document.querySelectorAll('.page-link').forEach(link => {
						link.addEventListener('click', function(e) {
							e.preventDefault();
							currentPage = parseInt(this.getAttribute('data-page'));
							fetchExperts(currentPage, itemsPerPage, searchInput.value, titleFilter
							.value);
							window.scrollTo({
								top: expertListContainer.offsetTop - 20,
								behavior: 'smooth'
							});
						});
					});
				}

				// 搜索和过滤专家
				function filterExperts() {
					const searchTerm = searchInput.value.toLowerCase();
					const title = titleFilter.value;

					// 重新从服务器获取筛选后的数据
					fetchExperts(1, itemsPerPage, searchTerm, title);
				}

				// 事件监听
				searchInput.addEventListener('input', filterExperts);
				titleFilter.addEventListener('change', filterExperts);
				searchButton.addEventListener('click', function(e) {
					e.preventDefault();
					filterExperts();
				});

				// 初始化页面
				fetchExperts();
			});
		</script>
	</body>
</html>